<!--
 * @Date: 2022-07-04 14:32:11
 * @LastEditTime: 2022-07-14 10:00:36
-->
<template>
  <div id="um-main" v-loading="loading">
    <div id="um-userInfo">
      <img :src="baseUrl + '/avator/' + userInfo.pic" alt="" id="um-avator" v-if="!loading">
      <div id="um-name">{{userInfo.nickname}}</div>
    </div>
    <div id="um-want" class="um-block">
      <div class="um-title">{{userInfo.nickname}}想看</div>
      <div class="um-videos">
        <div v-for="value in wantVideos" :key="value.id">
          <DisplayContainer :videoDetail="value" class="um-display" />
        </div>
      </div>
    </div>
    <div id="um-want" class="um-block">
      <div class="um-title">{{userInfo.nickname}}已看</div>
      <div class="um-videos">
        <div v-for="value in watchedVideos" :key="value.id">
          <DisplayContainer :videoDetail="value" class="um-display" />
        </div>
      </div>
    </div>
    <!-- <div id="um-want" class="um-block">
      <div class="um-title">{{userInfo.nickname}}已看</div>
      <div class="um-videos">
        <DisplayContainer :videoDetail="videos[0]" />
      </div>
    </div> -->
    <!-- <div id="um-comments" class="um-block">
      <div class="um-title">{{userInfo.nickname}}的评论</div>
      <div id="um-comment-item"><CommentItem :comment="comments[0]" /></div>
    </div> -->
  </div>
</template>

<script>
import { getOneUserInfo } from '@/api/user'
import { getHasWatched, getWantWatch } from '@/api/movie'
import { getUserComment } from '@/api/comment'
// import videos from '../../assets/test'
import CommentItem from '../comment/CommentItem.vue'
import DisplayContainer from '../display/DisplayContainer.vue'
export default {
  name: 'UserMain',
  components: {
    CommentItem,
    DisplayContainer
  },
  data: function () {
    return {
      userInfo: {
      },
      comments: [
      ],
      wantVideos: [],
      watchedVideos: [],
      baseUrl: this.picbed,
      loading: true,
      pathId: this.$route.params.id
    }
  },
  methods: {
    getPathUserInfo: function () {
      // console.log(this.$route.params)
      const pathId = this.$route.params.id
      if (pathId === this.$store.state.userInfo.uid) {
        Object.assign(this.userInfo, this.$store.state.userInfo)
      } else {
        getOneUserInfo(pathId)
          .then(res => {
            if (res.data.state === 200) {
              Object.assign(this.userInfo, res.data.data)
              // console.log(this.userInfo)
            } else {
              this.$message({
                message: res.data.message,
                type: 'error'
              })
            }
            this.loading = false
          })
      }
    },
    getWantWatch () {
      getWantWatch(this.pathId)
        .then(res => {
          if (res.data.state === 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              this.wantVideos.push(res.data.data[i])
            }
          }
        })
    },
    getHasWatched () {
      getHasWatched(this.pathId)
        .then(res => {
          if (res.data.state === 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              this.watchedVideos.push(res.data.data[i])
            }
          }
        })
    },
    getUserComment () {
      getUserComment(this.pathId)
        .then(res => {
          if (res.data.state === 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              this.comments.push(res.data.data[i])
            }
          }
        })
    }
  },
  mounted: function () {
    this.getPathUserInfo()
    this.getHasWatched()
    this.getWantWatch()
    // console.log(this.picbed)
    // console.log(this.userInfo)
  },
  created: function () {
    this.getPathUserInfo()
  }
}
</script>

<style>
#um-main {
  width: 100%;
  min-height: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  padding: 20px 0px 0px 0px;
}
#um-userInfo {
  margin: 20px 0 20px 0;
  width: 100%;
  height: 50px;
  display: flex;
}
#um-avator {
  width: 50px;
  height: 50px;
}
#um-name {
  font-size: 30px;
  margin-left: 20px;
  height: auto;
  line-height: 30px;
}
.um-block {
  margin-top: 40px;
  width: 100%;
}
.um-title {
  font-size: 20px;
  color: rgb(0, 119, 34);
}
#um-comment-item {
  width: 100%;
  height: 200px;
}
.um-videos {
  margin-top: 20px;
  display: flex;
}
.um-display {
  margin-right: 10px;
}
</style>
